input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}body{margin:0;user-select:none;width:1920px;height:1080px;overflow:hidden;transform-origin:left top;position:absolute}#home{display:flex;width:100%;height:100%;flex-direction:column;align-items:center;background-size:100% 100%}.logo-home{position:absolute;width:302px;height:70px;top:5%;right:3%}.title-img{width:759px;height:172px;margin-top:7%}.home-title{width:100%;height:70%}#menu-bar,.home-title{display:flex;align-items:center;justify-content:center}#menu-bar{width:min-content;height:500px;flex-direction:column;gap:40px}.menu-button{width:350px;height:100px;border-radius:60px;font-size:64px;font-weight:600;background-color:#fdd300;font-family:sans-serif;border:5px solid #fff;align-items:center;display:flex;justify-content:center}.button{border-radius:20px;border:2px solid #000;padding:10px 20px}#explain{width:100%;height:100%;align-items:center}#explain,#explain-area{display:flex;flex-direction:column;justify-content:flex-start;background-size:100% 100%}#explain-area{position:relative;height:660px;width:1330px;align-items:flex-start;font-size:52px;font-family:sans-serif;background-repeat:no-repeat;margin-top:9%;padding:50px}.explain-position{position:absolute;top:0;left:37%;transform:translateY(-50%)}.explain-title{font-size:54px;font-weight:600;margin:0;text-decoration:underline #ea6000;text-underline-offset:10px}.sub-content{display:grid;grid-template-columns:1fr 24fr}#button-home{width:100px;object-fit:contain;position:fixed;left:3%;bottom:2%}#game{width:100%;height:100%;align-items:center;justify-content:flex-start;background-size:100% 100%}#game,.left-area{display:flex;flex-direction:column}.left-area{font-size:52px;margin-top:5%}.input-content{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;width:1200px;gap:50px 20px}.input-item:last-child{grid-column:1/span 2;display:grid;grid-template-columns:220px 1fr}.input-bar{font-size:48px;width:200px}.input-bar,.sexual-item{border:3px solid;background-color:#fff}.sexual-item{padding:10px 60px;border-radius:20px;font-weight:600;font-size:56px}.sexual-item.selected-sexual{background-color:#e73827;border:none;color:#fff}.container{display:block;position:relative;padding-left:60px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.container input{position:absolute;opacity:0;cursor:pointer}.checkmark{position:absolute;top:50%;left:0;height:50px;width:50px;background-color:#fff;border-radius:50%;border:3px solid;transform:translateY(-50%)}.container input:checked~.checkmark{background-color:red}.checkmark:after{content:"";position:absolute;display:none}.ccontainer input:checked~.checkmark:after{display:block}.container .checkmark:after{top:9px;left:9px;width:8px;height:8px;border-radius:50%;background:#fff}#calculate-button{background-color:#00a386;color:#fff;width:max-content;border-radius:20px;padding:5px 30px}.calculate-content{display:grid;gap:20px}.calculate-item{display:flex;gap:20px}.side-bar{position:absolute;top:50%;right:0;display:flex;flex-direction:column;gap:40px;transform:translateY(-50%)}.side-control{width:min-content;font-size:48px;padding:30px 10px;background-color:#eee83a;font-weight:600;line-height:1}#plate{display:grid;width:100%;height:100%;grid-template-columns:1fr 1fr;font-size:24px;background-color:#9fd6ea}.plate-area,.result-area{display:grid;height:100%;grid-template-rows:4fr 12fr 1fr 2fr;justify-items:center;align-items:center}.plate-title,.result-title{width:406px;height:98px}#result-eat,#total-eat{display:grid;position:relative;border:2px solid #9f9f9f;width:86%;height:90%;border-radius:30px;margin-left:5%;background-color:#fff}.all-plate{padding:20px}.all-plate,.left-plate{display:grid;grid-template-columns:1fr 1fr;gap:15px}.left-plate,.right-plate{align-items:center;justify-items:center}.right-plate{display:grid;grid-template-rows:2fr 3fr;gap:15px}.plate-rect-block{display:flex;position:relative;width:100%;height:100%;border-radius:30px}.fruit-area{background-color:#fff0ab}.vegetable-area{background-color:#d7e6af}.fruit-area .per-block,.vegetable-area .per-block{display:grid;width:100%;height:100%;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr);justify-items:center;align-items:center;z-index:10}.protein-area{background-color:#f7d0cb}.grains-area{background-color:#fbd6a1}.grains-area .per-block,.protein-area .per-block{display:grid;width:100%;height:100%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);justify-items:center;align-items:center;z-index:10}.per-block img{width:80px;object-fit:contain}.plate-circle-block{display:flex;position:absolute;width:150px;height:150px;border-radius:50%}.dairy-area{background-color:#fff;border:2px solid #607c32;top:-20%;left:-10%}.oilAndNuts-area{background-color:#fcebd1;border:2px solid #9f9f9f;top:-20%;right:-10%}.dairy-area .per-circle-block,.oilAndNuts-area .per-circle-block{position:relative;width:150px;height:150px;border-radius:50%}.per-circle-block img{position:absolute;width:35px;height:35px;left:50%;object-fit:contain;border-radius:0 0 100% 100%;transform-origin:0 200%}.per-circle-block img:first-child{transform:rotate(0deg)}.per-circle-block img:nth-child(2){transform:rotate(45deg)}.per-circle-block img:nth-child(3){transform:rotate(90deg)}.per-circle-block img:nth-child(4){transform:rotate(135deg)}.per-circle-block img:nth-child(5){transform:rotate(180deg)}.per-circle-block img:nth-child(6){transform:rotate(225deg)}.per-circle-block img:nth-child(7){transform:rotate(270deg)}.per-circle-block img:nth-child(8){transform:rotate(315deg)}.plate-background-text{width:min-content;top:50%;transform:translate(-50%,-50%)}.plate-background-text,.plate-top-text{position:absolute;left:50%;font-size:40px;font-weight:600;pointer-events:none}.plate-top-text{width:max-content;top:-40%;transform:translate(-50%)}.plate-text,.result-text{font-size:36px;font-weight:600;margin-left:5%}.plate-button-bar,.result-button-bar{display:flex;width:70%;justify-content:space-evenly;font-size:42px;font-weight:600;margin-left:5%}.plate-button{display:flex;background-color:#eee83a;padding:5px 50px;border-radius:30px}.drag-preview{position:absolute;pointer-events:none;z-index:1000;opacity:.8}#result{display:flex;width:100%;height:100%;flex-direction:row;align-items:center;justify-content:center;background-size:100% 100%}.result-explain{position:absolute;left:10%;display:grid;grid-template-rows:repeat(4,1fr);font-size:36px}.result-explain-text{display:flex;align-items:center}.result-rect{width:50px;height:35px}#explain-dialog{display:grid;grid-template-rows:1fr 1fr 1fr;justify-items:center;align-items:center;position:fixed;width:48%;height:56%;top:50%;left:50%;transform:translate(-50%,-50%);border:15px solid #fcee21;border-radius:50px;background-size:contain;z-index:100}.explain-dialog-title{width:350px;height:100px;border-radius:60px;font-size:64px;font-weight:600;background-color:#fdd300;font-family:sans-serif;border:5px solid #fff;align-items:center;display:flex;justify-content:center;color:#000}.explain-dialog-text{font-size:56px;color:#fff}#amount-text{border-bottom:2px solid #fff;padding:0 40px}#advice-dialog{position:fixed;width:90%;height:90%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:110}#advice-close,#explain-close{position:absolute;width:90px;top:3%;right:2%}svg g image{cursor:pointer}